<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>jQuery Decorative Frames Plugin</title>
        <link type="text/css" href="css/demo.css" rel="stylesheet" />
        <link type="text/css" href="css/gallery.css" rel="stylesheet" />
        <link type="text/css" href="css/decorative-frames.css" rel="stylesheet" />
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
        <link type="text/css" href="css/decorative-frame-selector.css" rel="stylesheet" />
<!--[if IE]> 
		<link type="text/css" href="css/ie.css" rel="stylesheet" />
<![endif]--> 		
    </head>
    <body class="new">
<h1>jQuery Decorative Frame JQuery Plugin</h1>
<p class="credits"><em>by:</em> <a href="mailto:mmoossen@gmail.com">Michael Moossen</a></p>
<p class="credits">Original CSS Decorative Gallery <em>by:</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p>

<ul class="gallery">
<li><a href="#"><img src="images/1.jpg" alt="image" /><em>Abstract</em></a></li>
<li><a href="#"><img src="images/2.jpg" alt="image" /><em>Life</em></a></li>
<li><a href="#"><img src="images/3.jpg" alt="image" /><em>Virus</em></a></li>
<li><a href="#"><img src="images/4.jpg" alt="image" /><em>Brown City</em></a></li>
<li><a href="#"><img src="images/5.jpg" alt="image" /><em>Butterfly</em></a></li>
<li><a href="#"><img src="images/6.jpg" alt="image" /><em>Cassie</em></a></li>
<li><a href="#"><img src="images/7.jpg" alt="image" /><em>DJ</em></a></li>
<li><a href="#"><img src="images/8.jpg" alt="image" /><em>N Design</em></a></li>
<li><a href="#"><img src="images/9.jpg" alt="image" /><em>Flow</em></a></li>
<li><a href="#"><img src="images/10.jpg" alt="image" /><em>Car</em></a></li>
<li><a href="#"><img src="images/11.jpg" alt="image" /><em>Dance</em></a></li>
<li><a href="#"><img src="images/12.jpg" alt="image" /><em>Margot</em></a></li>
<li><a href="#"><img src="images/13.jpg" alt="image" /><em>Margot</em></a></li>
<li><a href="#"><img src="images/14.jpg" alt="image" /><em>Nature</em></a></li>
<li><a href="#"><img src="images/15.jpg" alt="image" /><em>Doggy</em></a></li>
</ul>

<h2>Select Decorative Frame</h2>
<div id="switcher"></div>
<div class="frame-selector" ><ul></ul></div>
<p class="footer"><a href="http://www.webdesignerwall.com/tutorials/css-decorative-gallery/">www.webdesignerwall.com/tutorials/css-decorative-gallery/</a></p>


<script type="text/javascript" src="lib/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.borderImage.js"></script>
<script type="text/javascript" src="js/jquery.decorativeFrames.js"></script>
<script type="text/javascript" src="js/jquery.decorativeFrameSelector.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
	// apply random frame
	var frames = $.decorativeFrames.all;
	var frame = frames[parseInt(Math.random() * frames.length)];
	var $pics = $('ul.gallery li a').decorativeFrame(frame);
	// frame selector
	var $frameSelector = $('div.frame-selector ul');
	$frameSelector
	  .decorativeFrameSelector(frame, 'images/1.jpg', function(frameName) { 
		$pics.decorativeFrame('destroy');
		$pics.decorativeFrame(frameName);
		return false;
	  });
	// set the width
	var $selected = $frameSelector.find('li.ui-state-active');
	var width = $selected.outerWidth(true);
	$frameSelector.width(frames.length * width);
	// scroll to selected frame if needed
	var left = $selected.position().left;
	var $parent = $frameSelector.parent();
	if (left + width > $parent.width()) {
		$parent.animate({ scrollLeft: left + 'px' }, 1000);
	}
	// apply theme selector, which will only affect the frame selector
	$('#switcher').themeswitcher();	
</script>

    </body>
</html>
